<template>
  <div class="mainDiv">
    <div class="autoDiv headDiv">
      <div class="logo">NiMiBrain</div>
    </div>
    <div class="middleContent mainDiv"></div>
    <div class="autoDiv loginAutoDiv">
      <div class="loginDiv">

        <div class="title" v-if="!isReg">登录</div>
        <form v-if="!isReg">
          <div class="inputDiv" :class="{'error' : !loginEmailValid && isloginEmailTouched}">
            <input type="text" placeholder="请输入邮箱" v-model="loginEmail" @blur="isloginEmailTouched=true" />
            <i class="icon-youxiang"></i>
            <div class="errorDiv">请输入正确的邮箱</div>
          </div>
          <div class="inputDiv" :class="{'error' : !loginPasswordValid && isloginPasswordTouched}">
            <input type="password" placeholder="请输入密码" v-model="loginPassword" @blur="isloginPasswordTouched=true" @keyup.enter="gotoLogin" />
            <i class="icon-mima"></i>
            <div class="errorDiv">请输入6位以上密码</div>
          </div>
          <mu-checkbox label="记住密码" v-model="remeber" />
          <mu-raised-button class="btn" :label="loginLoading ? '登录中' : '登 录'" @click="gotoLogin" backgroundColor="#ff3e3e" :disabled="!loginFormValid || loginLoading" fullWidth/>
          <mu-raised-button class="btn" label="注册" @click="isReg=true" fullWidth/>
        </form>

        <div class="title" v-if="isReg">注册</div>
        <form v-if="isReg">
          <div class="inputDiv" :class="{'error' : !regEmailValid && isregEmailTouched}">
            <input type="email" placeholder="请输入邮箱" v-model="regEmail" @blur="isregEmailTouched=true"  />
            <i class="icon-youxiang"></i>
            <div class="errorDiv">请输入正确的邮箱</div>
          </div>
          <div class="inputDiv" :class="{'error' : !regPasswordValid && isregPasswordTouched}">
            <input type="password" placeholder="请输入密码" v-model="regPassword" @blur="isregPasswordTouched=true" />
            <i class="icon-mima"></i>
            <div class="errorDiv">请输入6位以上密码</div>
          </div>
          <div class="inputDiv" :class="{'error' : !regPassword2Valid && isregPassword2Touched}">
            <input type="password" placeholder="请再次输入密码" v-model="regPassword2" @blur="isregPassword2Touched=true" @keyup.enter="gotoReg" />
            <i class="icon-mima"></i>
            <div class="errorDiv">请再次输入6位以上相同的密码</div>
          </div>
          <mu-raised-button class="btn" :label="regLoading ? '注册中' : '注 册'" :disabled="!regFormValid || regLoading" backgroundColor="#ff3e3e" @click="gotoReg" fullWidth/>
          <mu-raised-button class="btn" label="登 录" @click="isReg=false" fullWidth/>
        </form>
      </div>
      <img src="../assets/img/mid1.png" class="mid1" />
      <img src="../assets/img/mid2.png" class="mid2" />
      <img src="../assets/img/mid3.png" class="mid3" />
      <img src="../assets/img/mid4.png" class="mid4" />
      <img src="../assets/img/mid5.png" class="mid5" />
    </div>
    <footbar></footbar>
  </div>
</template>

<script>
import footbar from './footbar'
import validator from 'validator'
export default {
  name: 'index',
  components: {
      footbar
  },
  data () {
    return {
      remeber:false,
      isReg:false,
      loginEmail:"",
      loginPassword:"",
      isloginPasswordTouched:false,
      isloginEmailTouched:false,
      regEmail:"",
      regPassword:"",
      regPassword2:"",
      isregPasswordTouched:false,
      isregPassword2Touched:false,
      isregEmailTouched:false,
      regLoading:false,
      loginLoading:false
    }
      
  },
  methods:{
    postReg () {
      this.regLoading = true;
      this.$http.post(this.$root.baseUrl+'api.php/Users/nimiReg', {username:this.regEmail,email:this.regEmail,password:this.regPassword},{emulateJSON:true}).then((response) => {
          this.$root.showToast(response.body.msg);
          this.regLoading = false;
          if (response.body.error == 0) {
            localStorage.nmb_token = response.body.data.token;
            this.$router.push({ name: 'making' })
          }
      }, (response) => {
          this.regLoading = false;
          this.$root.showToast("注册失败");
      });
    },
    gotoReg () {
      if(this.regFormValid){
        this.postReg();
      }
    },
    postLogin () {
      this.loginLoading = true;
      this.$http.get(this.$root.baseUrl+'api.php/Users/nimiLogin/username/'+this.loginEmail+'/password/'+this.loginPassword,).then((response) => {
          this.$root.showToast(response.body.msg);
          this.loginLoading = false;
          if (response.body.error == 0) {
            localStorage.nmb_token = response.body.data.token;
            /*if (sessionStorage.nmb_lastPath && sessionStorage.nmb_lastPath != "") {
              this.$router.push({ name: sessionStorage.nmb_lastPath })
            }
            else{
              this.$router.push({ name: 'making' })
            }*/
            this.$router.push({ name: 'making' })
          }
      }, (response) => {
          this.loginLoading = false;
          this.$root.showToast("登录失败");
      });
    },
    gotoLogin () {
      if(this.loginFormValid){
        this.postLogin();
      }
    }
  },
  computed:{
    loginEmailValid () {
      return validator.isEmail(this.loginEmail);
    },
    loginPasswordValid () {
      return validator.isLength(this.loginPassword,{min:6, max: undefined});
    },
    loginFormValid () {
      return this.loginEmailValid && this.loginPasswordValid;
    },
    regEmailValid () {
      return validator.isEmail(this.regEmail);
    },
    regPasswordValid () {
      return validator.isLength(this.regPassword,{min:6, max: undefined});
    },
    regPassword2Valid () {
      return validator.isLength(this.regPassword2,{min:6, max: undefined}) && validator.equals(this.regPassword2,this.regPassword);
    },
    regFormValid () {
      return this.regEmailValid && this.regPasswordValid && this.regPassword2Valid;
    }
  },
  mounted () {
  	if (localStorage.nmb_token && localStorage.nmb_token!="") {
      //this.$root.gotoLogin('making')
    }
  }
}
</script>

<style scoped lang="less">
.headDiv{
  height:100px;
  overflow: hidden;
  .logo{
    height:32px;
    line-height: 32px;
    color:#090808;
    float: left;
    margin:40px 0 0 0;
    font-size: 34px;
  }
}
.middleContent{
  background-color: #00a0e9;
  height:458px;
}
.loginAutoDiv{
  overflow: visible;
  height: 562px;
  margin:-458px auto 100px auto;
  padding: 108px 10px 10px 10px;
  position: relative;
  .mid1{
    position: absolute;
    left:-388px;
    bottom:164px;
  }
  .mid2{
    position: absolute;
    left:100px;
    top:33px;
  }
  .mid3{
    position: absolute;
    left:482px;
    top:174px;
  }
  .mid4{
    position: absolute;
    left:537px;
    top:367px;
  }
  .mid5{
    position: absolute;
    left:640px;
    top:140px;
  }
}
.loginDiv{
  width:344px;
  height:444px;
  background: #fff;
  float:right;
  margin:0;
  border-radius: 5px;
  box-shadow: 0 0 3px #ccc;
  padding:0 20px;
  position: relative;
  z-index: 999;
  .title{
    width:100%;
    height:98px;
    line-height: 98px;
    font-size: 20px;
    text-align: center;
    color: #000;
  }
  form{
    width:100%;
    .inputDiv{
      width:100%;
      min-height:44px;
      position: relative;
      margin:0 0 16px 0;
      input{
        width:100%;
        height:44px;
        line-height: 42px;
        border: 1px solid #a5a3a3;
        border-radius: 5px;
        padding:0 10px 0 42px;
        font-size: 15px;
        color:#999;
      }    
      i{
        position: absolute;
        left:10px;
        top:6px;
        font-size: 26px;
        color:#a5a3a3;
        &.icon-mima{
          top:4px;
        }
      } 
      .errorDiv{
        width: 100%;
        height:20px;
        line-height: 32px;
        font-size: 14px;
        color:#ff4081;
        display: none;
      }
      &.error{
        input{
          border-color: #f8bbd0;
          box-shadow: 0 0 17px #ff80ab;
        }
        .errorDiv{
          display: block;
        }
      }
    }
    .btn{
      border-radius: 5px;
      height:44px;
      margin:0 0 15px 0;
      &:disabled{
        opacity: .7;
      }
    }
  }
}
</style>
